<template>
  <div class="view-container">
    <header-module :left-custom="true" :padding="true">
      <template #left-con>
        <div>
          <span style="font-size: 16px; margin-right: 20px">
            {{ formData?.businessFlow?.businessFlowNo }}
          </span>
          <el-tag size="small" type="warning">
            <div v-if="formData?.businessFlow?.flowStatus!=='DOING'">
              <span v-if="formData?.businessFlow?.businessFlowStatus === '0'">草稿</span>
              <span v-if="formData?.businessFlow?.businessFlowStatus === '2'">有效</span>
            </div>
            <div v-if="formData?.businessFlow?.flowStatus!=='AGREE'  && formData?.businessFlow?.flowStatus!=='REPEAL'">
              {{ getLabel('approval_result', formData?.businessFlow?.flowStatus) }}
            </div>
          </el-tag>
        </div>
      </template>
      <template #btn>
        <el-button class="border-btn" size="small" style="margin-right: 20px;" @click="handlBack">返回</el-button>
        <template v-if="formData">

          <el-button v-auth="{v:['crm:businessFlow:flowImport:editor'],
          bool:(formData?.businessFlow?.flowStatus ==='REFUSE' || formData?.businessFlow?.flowStatus ==='REPEAL' ||
          formData?.businessFlow?.flowStatus ==='REJECT_INITIATOR'
            || formData?.businessFlow?.flowStatus ==='REJECT' || formData?.businessFlow?.businessFlowStatus === '0' )
            && formData?.businessFlow?.flowStatus !== 'DOING'}" size="small" type="primary"
            @click="handlEdit(formData?.businessFlow?.id)">编辑
          </el-button>

          <el-button v-auth="{v:['crm:businessFlow:flowImport:delete'],
          bool:(formData?.businessFlow?.flowStatus ==='REFUSE' || formData?.businessFlow?.flowStatus ==='REPEAL' ||
                formData?.businessFlow?.flowStatus ==='REJECT_INITIATOR'
            || formData?.businessFlow?.flowStatus ==='REJECT' || formData?.businessFlow?.businessFlowStatus === '0' )
            && formData?.businessFlow?.flowStatus !== 'DOING'}" size="small" type="primary"
            @click="handlDele(formData?.businessFlow?.id)">删除
          </el-button>
        </template>
      </template>
    </header-module>
    <div class="filter-container" style="margin-bottom: 0px">
      <el-form class="filter-form-inline" label-position="left" label-width="100px" size="small">
        <el-row style="margin-left: 20px; margin-right: 20px">
          <el-col :span="8">
            <el-form-item :label="route.query.type === '1' ?'配送商名：':'代理商名称：'">
              {{
                route.query.type === '1' ? formData?.businessFlow?.distributeName : formData?.businessFlow?.agentName
              }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="导入时间：">
              {{ dateFormat("yyyy-mm-dd HH:MM:SS", formData?.businessFlow?.createdAt) }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作人：">
              {{ formData?.businessFlow?.creatorName }}
              [{{ formData?.businessFlow?.departmentName }}]
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </div>
    <div class="main-content" style="margin-top: 20px">

      <div class="list-container">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane :label="route.query.type === '1' ?'原始流向数据' :'流向数据明细'" name="1">
            <originalDetail :table-data="tableData" />
          </el-tab-pane>
          <el-tab-pane v-if="route.query.type === '1'" label="流向核算数据" name="2">
            <flowDetails :form-data="formData" :table-data="tableData" />
          </el-tab-pane>
          <el-tab-pane label="操作记录" name="3">
            <operation-view mode="business_flow" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

  </div>
</template>

<script>
import {
  defineAsyncComponent,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  toRefs,
} from "vue";
import { useRoute, useRouter } from "vue-router";

export default {
  name: "Index",
  components: {
    flowDetails: defineAsyncComponent((_) =>
      import("../modules/flowDetails.vue")
    ),
    originalDetail: defineAsyncComponent((_) =>
      import("../modules/originalDetail.vue")
    ),
  },
  setup() {
    const api = inject("api");
    const router = useRouter();
    const route = useRoute();
    var data = reactive({
      activeName: "1",
      formData: {},
      tableData: [],
    });
    const currentInstance = getCurrentInstance();

    // 编辑
    const handlEdit = (id) => {
      if (route.query.type == "1") {
        router.push({
          path: "/businessFlow/flowImport/create",
          query: { id: id, type: "1" },
        });
      }
      if (route.query.type == "2") {
        router.push({
          path: "/businessFlow/flowImport/straightCreate",
          query: { id: id, type: "2" },
        });
      }
    };

    // 删除
    const handlDele = (id) => {
      currentInstance.proxy
        .alertBox({
          message: "删除数据后不可恢复,确定删除？",
        })
        .then(() => {
          api.businessFlow.TBUSINESSFLOW_DELETE(id).then((res) => {
            if (res.code) {
              currentInstance.proxy.customMessage({
                type: "error",
                message: res.msg,
              });
            } else {
              handlBack();
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    };

    // 获取详情
    const handlDetail = (id) => {
      api.businessFlow.TBUSINESSFLOW_DETAIL(id).then((res) => {
        if (res.code === 0) {
          data.formData = res.data.businessFlow;
        }
      });
    };

    const handlBack = () => {
      router.go(-1);
    };

    const handleClick = (val) => {
      data.activeName = val.props.name;
      if (data.activeName === "1") {
        handlList(1);
      }
      if (data.activeName === "2") {
        handlList(2);
      }
    };

    const handlList = (type) => {
      const dataList = {
        id: Number(route.query.id),
        type: type,
      };
      api.businessFlow.TBUSINESSFLOW_DETAIL_LIST(dataList).then((res) => {
        if (res.code === 0) {
          data.tableData = res.data.list;
        }
      });
    };

    onMounted((_) => {
      if (route.query.id) {
        handlDetail(route.query.id);
        handlList(1);
      }
    });

    return {
      route,
      ...toRefs(data),
      handlDetail,
      handlBack,
      handleClick,
      handlList,
      handlEdit,
      handlDele,
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
